<template>
    <div class="chartName">
      <div class="tiao"></div>
      <div>{{ title }}</div>
    </div>
    <div class="main" ref="chart1" style="width: 100%; height: 100%"></div>
  </template>
       
       
      <script setup>
  // 先引入echarts
  import * as echarts from "echarts";
  // vue3 引入对应功能
  import { onMounted, ref } from "vue";
  
  defineProps({
    title: {
      type: String,
    },
  });
  // 声明chart1，使用ref赋值null
  const chart1 = ref(null);
  
  // 声明echarts函数
  const chart = () => {
    // 解决echarts在vue中切换到其他页面再返回来就不显示的问题
    chart1.value.setAttribute("_echarts_instance_", "");
    // 这里使用chart1.value的形式获取到dom节点
    let myChart = echarts.init(chart1.value);
  
    // 绘制图表
    myChart.setOption({
  
  tooltip: {
    trigger: 'item'
  },
  legend: {
    
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        1
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});
    // echarts 自适应，如果dom元素是自适应高宽，会随之改变echarts大小
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  };
  // 数据渲染完成后在这里挂载
  onMounted(() => {
    chart();
  });
  </script>
       
      <style scoped>
  .chartName {
    font-size: 20px;
    color: #1b1b1b;
    display: flex;
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 10px;
    padding-bottom: 10px;
  }
  .main {
    margin: auto;
  }
  .tiao {
    width: 4px;
    height: 20px;
    margin-right: 9px;
    background-color: #945635;
    margin-top: 5px;
  }
  </style>